<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBandList } from '#/api/goods';
import { useVbenModal } from '@vben/common-ui';
import Form from './modules/form.vue';

interface RowType {
  id: string;
  band_name: string;
  created_at: string;
  updated_at: string;

}

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'band_name', sortable: true, title: '波段名称' },
    { field: 'created_at', sortable: true, title: '创建时间' },
    { field: 'updated_at', sortable: true, title: '更新时间' },
    {
      field: 'action',
      title: '操作',
      width: '200px',
      slots: {
        default: 'action',
      },
    },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page, sort }) => {
        const res = await getBandList({
          page: page.currentPage,
          pageSize: page.pageSize,
          sortBy: sort.field,
          sortOrder: sort.order,
        });
        return {
          items: res.list,
          total: res.total,
        };
      },
    },
    sort: true,
  },
  sortConfig: {
    defaultSort: { field: 'category', order: 'desc' },
    remote: true,
  },
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});

const [Modal, modalApi] = useVbenModal({
  connectedComponent: Form,
});

function handleAdd() {
  modalApi.setData({ info: {} });
  modalApi.open();
}

function handleEdit(row: RowType) {
  modalApi.setData({ info: row });
  modalApi.open();
}

function handleDelete(row: RowType) {
  // Add confirmation logic here in a real app
  console.log('delete', row);
  message.success('删除成功');
  gridApi.reload();
}
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="数据列表" table-title-help="提示">
      <template #toolbar-tools>
        <Button class="mr-2" type="primary" @click="handleAdd"> 新增 </Button>
      </template>
      <template #action="{ row }">
        <div class="flex items-center justify-center">
          <Button class="mr-2" type="link" @click="handleEdit(row)">
            编辑
          </Button>
          <Button
            class="mr-2"
            danger
            type="link"
            @click="() => handleDelete(row)"
          >
            删除
          </Button>
        </div>
      </template>
    </Grid>
    <Modal @fetch-data="()=>gridApi.reload()"/>
  </Page>
</template>
